<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>缓存</title>
	<style type="text/css">
		body{
			padding: 10px;
		}
		th,td{
			padding: 2px 5px;
		}
		.picker{
			border: 1px solid #ccc;
			border-radius: 3px;
			width: 100px;
			height: 34px;
			line-height: 34px;
			cursor: pointer;
			margin-bottom: 1px;
		}
		.picker-panel{
			position: absolute;
			z-index: 1000;
			min-width: 320px;
			background: #fff;
			border:1px solid #ddd;
			border-radius: 3px;
			box-shadow: 5px 5px 5px #888888;
			display: block;
			padding: 5px;
		}
	</style>
</head>
<body>
	<div id="app">
		<ul>
			<li><a href="javascript:;" @click="update('purchase')">更新报单表</a></li>
		</ul>
		<div>
			<table>
				<tr>
					<th>page</th>
					<th>page_size</th>
					<th>affected</th>
					<th>remarks</th>
				</tr>
				<tr v-for="row in rows" :key="row.page">
					<td>{{ row.page }}</td>
					<td>{{ row.page_size }}</td>
					<td>{{ row.affected }}</td>
				</tr>
			</table>
		</div>
	</div>
<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
<script src="__STATIC__/assets/vendor/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			urls: {
				purchase: "{%:url('Index/updatePurchase')%}"
			},
			rows: [],
			page: 1,
			info: '',
		},
		methods: {
			update: function(type){
				var url = this.urls[type];
				var _this = this;

				var timer= setInterval(function(){
					$.post(url+'?page='+_this.page,{

					},function(rsp){
						_this.page ++;

						var row = {
							page: rsp.data.page,
							page_size: rsp.data.page_size,
							affected: rsp.data.affected
						}
						_this.rows.push(row);

						if (rsp.data.page_size == 0) {
			        		clearInterval(timer);
			        		_this.info = '计时器停止';
			        		_this.page = 1;
			        	}
					},'json')
				},1000)
			}
		}
	})
</script>
</body>
</html>